<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //如果数组列表太大，下面递归代码将导致堆栈溢出，如何解决
        var list = readHugeList();
        var nextListItem = function () {
            var item = list.pop();
            if (item) {

                nextListItem();
            }
        }


        // 通过修改nextListltem函数可以避免潜在的堆栈溢出， 如下所示: 
        //var list = readHugelist();

        // var nextlisttem = function () {

        //     var item = list.pop();

        //     if (item) {

        //         //process the list item....

        //         setTimeout(nextLitem, 0);

        //     }

        // };

        // 堆栈溢出被消除， 因为事件循环处理递归， 而不是调用堆栈。

        // 当nextListltem运行时， 如果item不为null, 则将超时函数
        // (nextListltem) 推送到事件队列， 并且函数退出， 从而使调用堆栈清零。

        // 当事件队列运行超时事件时， 将处理下一一个项目， 并设置 - 一个计时器以再次调用nextListltem。
        // 因此， 该方法从头到尾不经过直接递归调用即可处理， 因此调用堆栈保持清晰， 无论迭代次数如何。
    </script>
</body>

</html>